<template>
	<view class="page">
		<text class="t1">Hello uni-app</text>
		<text class="t2">今天天气真好</text>

		<view class="sec">
			<text class="label">数据绑定:</text>
			<text class="txt"> {{title}}</text>
			<text class="txt">id: 1 name: uni-app</text>
			<text class="txt">id: 2 name: HTML</text>
			<image :src="imgSrc" :class="imgClass" mode="aspectFit" style="width: 60rpx;height: 60rpx;">
			</image>
		</view>
		<view class="sec">
			<button size="mini" @click="handleClick">点击事件处理</button>
		</view>

		<view class="sec">
			<text class="txt">列表渲染:</text>
			<view v-if="grammerList">
				<text class="txt" v-for="(item,index) in arr" :key="item.id">
					<view style="color: aqua;">{{index + 1}}: {{item.name}}</view>
				</text>
			</view>
			<text v-else class="txt">列表已隐藏</text>
		</view>
		<view class="sec">
			<text class="label">0.title: How to do lists in Vue</text>
			<text class="txt">1.author: Jane Doe</text>
			<text class="txt">2.publishedAt: 2020-04-10</text>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				grammerList: true,
				arr: [{
						id: 1,
						name: 'uni-app'
					},
					{
						id: 2,
						name: 'HTML'
					}
				],
				title: 'Hello uni-app',
				imgSrc: '/static/logo.png',
				imgClass: 'small-logo'
			};
		},
		methods: {
			handleClick() {
				uni.showToast({
					title: '你点击了按钮',
					icon: 'none'
				});
			}
		}
	}
</script>
<style>
	.page {
		padding: 20rpx;
	}

	.t1 {
		display: block;
		font-size: 24rpx;
		font-weight: bold;
	}

	.t2 {
		display: block;
		font-size: 16rpx;
		color: #555;
		margin-bottom: 20rpx;
	}

	.sec {
		margin: 15rpx 0;
	}

	.label {
		font-weight: bold;
		margin-right: 8rpx;
	}

	.txt {
		display: block;
		line-height: 1.6;
	}
	.small-logo{
		opacity: .8;
	}
</style>